<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
    VideoPlay,
    View,
    Timer,
    OfficeBuilding,
    Flag,
    UserFilled,
    Promotion,
    Calendar,
    ChatDotRound,
    Share,
    Star,
    Bell,
    More,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

/*直播信息接口定义*/
interface LiveItem {
    id: string;
    companyName: string;
    companyLogo?: string;
    companyIndustry: string;
    companyCategory: string;
    coverImage: string;
    title: string;
    status: "upcoming" | "live" | "ended";
    viewCount?: string;
    viewers?: number;
    startTime?: string;
    duration?: string;
    description?: string;
    tags?: string[];
    isRecommended?: boolean;
}

// 组件props定义
const props = defineProps({
    liveItems: {
        type: Array as () => LiveItem[],
        default: () => [],
    },
    maxDisplay: {
        type: Number,
        default: 6,
    },
});

// 默认直播数据
const defaultLiveItems = ref([
    {
        id: "1",
        companyName: "创梦电商",
        companyLogo: "https://via.placeholder.com/40",
        companyIndustry: "社交网络",
        companyCategory: "互联网",
        coverImage: "https://via.placeholder.com/280x150/09b4ae/ffffff?text=创梦电商",
        title: "创梦电商2024校招直播宣讲会",
        status: "live",
        viewCount: "招聘职网络媒体运营...",
        viewers: 328,
        startTime: "2023-11-10 14:30",
        duration: "2小时",
        description: "本次直播将介绍创梦电商2024校园招聘计划，包括岗位需求、薪资福利、面试流程等详细信息。",
        tags: ["互联网", "电商", "应届生"],
        isRecommended: true,
    },
    {
        id: "2",
        companyName: "创梦电商",
        companyLogo: "https://via.placeholder.com/40",
        companyIndustry: "社交网络",
        companyCategory: "互联网",
        coverImage: "https://via.placeholder.com/280x150/09b4ae/ffffff?text=创梦电商",
        title: "创梦电商产品经理岗位专场",
        status: "live",
        viewCount: "办公室自媒体营销...",
        viewers: 156,
        startTime: "2023-11-10 15:00",
        duration: "1.5小时",
        description: "产品经理岗位专场招聘，详细介绍岗位职责、技能要求、职业发展路径等。",
        tags: ["产品", "互联网"],
        isRecommended: false,
    },
    {
        id: "3",
        companyName: "深圳乐有家控股集团",
        companyLogo: "https://via.placeholder.com/40",
        companyIndustry: "房地产中介 | 租赁",
        companyCategory: "互联网",
        coverImage: "https://via.placeholder.com/280x150/09b4ae/ffffff?text=深圳乐有家",
        title: "深圳乐有家2024校园招聘宣讲会",
        status: "live",
        viewCount: "卖过7-9K职位...",
        viewers: 492,
        startTime: "2023-11-10 16:00",
        duration: "2小时",
        description: "深圳乐有家控股集团2024校园招聘宣讲会，诚邀全国高校优秀毕业生加入。",
        tags: ["房地产", "销售", "管培生"],
        isRecommended: true,
    },
    {
        id: "4",
        companyName: "万商云集",
        companyLogo: "https://via.placeholder.com/40",
        companyIndustry: "互联网",
        companyCategory: "互联网",
        coverImage: "https://via.placeholder.com/280x150/09b4ae/ffffff?text=万商云集",
        title: "万商云集技术岗位专场招聘",
        status: "upcoming",
        viewCount: "【10号发布】可远程...",
        viewers: 215,
        startTime: "2023-11-11 10:00",
        duration: "1.5小时",
        description: "技术岗位专场招聘，包括前端、后端、算法、测试等多个岗位，可远程办公。",
        tags: ["技术", "远程"],
        isRecommended: false,
    },
    {
        id: "5",
        companyName: "作业帮",
        companyLogo: "https://via.placeholder.com/40",
        companyIndustry: "互联网",
        companyCategory: "互联网",
        coverImage: "https://via.placeholder.com/280x150/09b4ae/ffffff?text=作业帮",
        title: "作业帮2024校园招聘宣讲会",
        status: "upcoming",
        viewCount: "纯竞选无薪资初创应届...",
        viewers: 178,
        startTime: "2023-11-11 13:30",
        duration: "2小时",
        description: "作业帮2024校园招聘宣讲会，诚邀全国高校优秀毕业生加入。",
        tags: ["教育", "互联网", "应届生"],
        isRecommended: true,
    },
    {
        id: "6",
        companyName: "创梦电商",
        companyLogo: "https://via.placeholder.com/40",
        companyIndustry: "社交网络",
        companyCategory: "互联网",
        coverImage: "https://via.placeholder.com/280x150/09b4ae/ffffff?text=创梦电商",
        title: "创梦电商客服岗位专场招聘",
        status: "upcoming",
        viewCount: "公司直招电商客服...",
        viewers: 145,
        startTime: "2023-11-11 15:00",
        duration: "1小时",
        description: "客服岗位专场招聘，详细介绍岗位职责、技能要求、职业发展路径等。",
        tags: ["客服", "电商"],
        isRecommended: false,
    },
]);

// 实际展示的数据
const displayedLiveItems = computed(() => {
    return props.liveItems.length > 0 ? props.liveItems : defaultLiveItems.value.slice(0, props.maxDisplay);
});

// 直播分类
const activeCategory = ref("all");
const categories = [
    { label: "全部直播", value: "all" },
    { label: "IT/互联网", value: "it" },
    { label: "教育培训", value: "education" },
    { label: "金融", value: "finance" },
    { label: "房地产", value: "estate" },
    { label: "制造业", value: "manufacture" },
];

// 筛选后的直播列表
const filteredLiveItems = computed(() => {
    if (activeCategory.value === "all") {
        return displayedLiveItems.value;
    } else {
        return displayedLiveItems.value.filter((item) => {
            if (activeCategory.value === "it") {
                return item.companyCategory === "互联网" || item.companyIndustry.includes("互联网");
            } else if (activeCategory.value === "education") {
                return item.companyCategory === "教育培训" || item.companyIndustry.includes("教育");
            } else if (activeCategory.value === "finance") {
                return item.companyCategory === "金融" || item.companyIndustry.includes("金融");
            } else if (activeCategory.value === "estate") {
                return item.companyCategory === "房地产" || item.companyIndustry.includes("房地产");
            } else if (activeCategory.value === "manufacture") {
                return item.companyCategory === "制造业" || item.companyIndustry.includes("制造");
            }
            return true;
        });
    }
});

// 路由实例
const router = useRouter();

/**
 * 查看更多直播
 */
const viewMoreLives = () => {
    router.push("/job");
};

/**
 * 观看直播
 * @param id - 直播ID
 */
const watchLive = (id) => {
    console.log("观看直播:", id);
    // 实际项目中跳转到直播页面
    router.push({
        path: "/liveDetail",
        query: { id },
    });
};

/**
 * 预约直播
 * @param id - 直播ID
 * @param event - 事件对象
 */
const reserveLive = (id, event) => {
    if (event) {
        event.stopPropagation();
    }

    // 在实际应用中，这里应调用API进行预约
    ElMessage.success("直播预约成功，将在开始前通知您");
};

/**
 * 分享直播
 * @param id - 直播ID
 * @param event - 事件对象
 */
const shareLive = (id, event) => {
    if (event) {
        event.stopPropagation();
    }

    // 在实际应用中，这里应调用分享API
    ElMessage.success("分享链接已复制到剪贴板");
};

/**
 * 格式化观看人数
 * @param count - 观看人数
 * @returns 格式化后的字符串
 */
const formatViewers = (count) => {
    if (!count) return "0";

    if (count >= 10000) {
        return (count / 10000).toFixed(1) + "w";
    } else if (count >= 1000) {
        return (count / 1000).toFixed(1) + "k";
    }
    return count.toString();
};

/**
 * 获取状态标签类型
 * @param status - 直播状态
 * @returns 标签类型
 */
const getStatusType = (status) => {
    if (status === "live") return "danger";
    if (status === "upcoming") return "warning";
    return "info";
};

/**
 * 获取状态文本
 * @param status - 直播状态
 * @returns 状态文本
 */
const getStatusText = (status) => {
    if (status === "live") return "直播中";
    if (status === "upcoming") return "即将开始";
    return "已结束";
};

// 组件挂载时执行
onMounted(() => {
    // 可以在这里加载数据
});
</script>

<template>
    <div class="campus-live-container">
        <!-- 分类和更多按钮 -->
        <div class="category-header">
            <div class="category-tabs">
                <el-tabs v-model="activeCategory" class="live-tabs">
                    <el-tab-pane
                        v-for="category in categories"
                        :key="category.value"
                        :label="category.label"
                        :name="category.value"
                    ></el-tab-pane>
                </el-tabs>
            </div>

            <div class="more-actions">
                <el-button type="primary" plain size="small" @click="viewMoreLives" class="more-btn">
                    查看更多直播 <el-icon class="el-icon--right"><Promotion /></el-icon>
                </el-button>
            </div>
        </div>

        <!-- 直播列表 -->
        <el-row :gutter="20">
            <el-col
                v-for="item in filteredLiveItems"
                :key="item.id"
                :xs="24"
                :sm="12"
                :md="8"
                :lg="8"
                :xl="6"
                class="live-col"
            >
                <el-card
                    shadow="hover"
                    class="live-card"
                    :class="{ 'is-recommended': item.isRecommended }"
                    @click="watchLive(item.id)"
                >
                    <!-- 直播封面 -->
                    <div class="live-cover">
                        <el-image :src="item.coverImage" fit="cover" class="cover-image" loading="lazy">
                            <template #placeholder>
                                <div class="image-placeholder">
                                    <el-icon><VideoPlay /></el-icon>
                                </div>
                            </template>
                        </el-image>

                        <!-- 直播状态标签 -->
                        <div class="live-status">
                            <el-tag
                                :type="getStatusType(item.status)"
                                size="small"
                                effect="dark"
                                class="status-tag"
                                :class="{ blink: item.status === 'live' }"
                            >
                                <el-icon v-if="item.status === 'live'" class="blink-icon"><VideoPlay /></el-icon>
                                {{ getStatusText(item.status) }}
                            </el-tag>
                        </div>

                        <!-- 观看人数 -->
                        <div class="viewer-count">
                            <el-icon><View /></el-icon>
                            <span>{{ formatViewers(item.viewers) }}</span>
                        </div>

                        <!-- 推荐标签 -->
                        <div v-if="item.isRecommended" class="recommended-badge">
                            <el-tag type="warning" effect="dark" size="small">推荐</el-tag>
                        </div>
                    </div>

                    <!-- 直播信息 -->
                    <div class="live-info">
                        <!-- 公司信息 -->
                        <div class="company-info">
                            <el-avatar :size="24" :src="item.companyLogo" class="company-logo">
                                <el-icon><OfficeBuilding /></el-icon>
                            </el-avatar>

                            <div class="company-details">
                                <span class="company-name">{{ item.companyName }}</span>
                                <el-tag size="small" effect="plain" class="industry-tag">
                                    {{ item.companyIndustry }}
                                </el-tag>
                            </div>
                        </div>

                        <!-- 直播标题 -->
                        <h3 class="live-title" :title="item.title">{{ item.title }}</h3>

                        <!-- 直播时间和描述 -->
                        <div class="live-meta">
                            <div class="time-info">
                                <el-icon color="#67C23A"><Timer /></el-icon>
                                <span>{{ item.startTime }}</span>
                                <span v-if="item.duration" class="duration">({{ item.duration }})</span>
                            </div>

                            <div class="description" :title="item.description">
                                {{ item.description || item.viewCount }}
                            </div>
                        </div>

                        <!-- 标签 -->
                        <div v-if="item.tags && item.tags.length" class="tags-container">
                            <el-tag
                                v-for="(tag, index) in item.tags"
                                :key="index"
                                size="small"
                                :type="index === 0 ? 'success' : index === 1 ? 'info' : 'warning'"
                                effect="light"
                                class="tag-item"
                            >
                                {{ tag }}
                            </el-tag>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="live-actions">
                            <el-button
                                v-if="item.status === 'live'"
                                type="danger"
                                size="small"
                                class="action-btn watch-btn"
                            >
                                <el-icon><VideoPlay /></el-icon>
                                观看直播
                            </el-button>

                            <el-button
                                v-else
                                type="warning"
                                size="small"
                                @click="reserveLive(item.id, $event)"
                                class="action-btn reserve-btn"
                            >
                                <el-icon><Bell /></el-icon>
                                预约提醒
                            </el-button>

                            <el-button
                                type="info"
                                size="small"
                                plain
                                @click="shareLive(item.id, $event)"
                                class="action-btn share-btn"
                            >
                                <el-icon><Share /></el-icon>
                                分享
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 空状态 -->
        <el-empty v-if="filteredLiveItems.length === 0" description="暂无相关直播" :image-size="200">
            <template #image>
                <el-icon :size="60"><VideoPlay /></el-icon>
            </template>
        </el-empty>
    </div>
</template>

<style scoped>
.campus-live-container {
    width: 100%;
}

/* 分类头部 */
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.category-tabs {
    flex: 1;
}

.live-tabs {
    margin-bottom: 0;
}

.live-tabs :deep(.el-tabs__header) {
    margin-bottom: 0;
}

.live-tabs :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
}

.more-actions {
    margin-left: 15px;
}

.more-btn {
    white-space: nowrap;
}

/* 直播卡片列 */
.live-col {
    margin-bottom: 20px;
}

/* 直播卡片 */
.live-card {
    height: 100%;
    transition: all 0.3s ease;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.live-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* 推荐直播卡片 */
.live-card.is-recommended {
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f56c6c, #e6a23c) border-box;
}

/* 直播封面 */
.live-cover {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9比例 */
    overflow: hidden;
    border-radius: 4px;
}

.cover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.live-card:hover .cover-image {
    transform: scale(1.05);
}

.image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #f5f7fa;
    color: #909399;
}

.image-placeholder .el-icon {
    font-size: 30px;
}

/* 直播状态标签 */
.live-status {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}

.status-tag {
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.status-tag.blink {
    animation: pulse 1.5s infinite;
}

.blink-icon {
    margin-right: 4px;
    animation: blink 1.5s infinite;
}

/* 观看人数 */
.viewer-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
}

.viewer-count .el-icon {
    margin-right: 4px;
    font-size: 14px;
}

/* 推荐标签 */
.recommended-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}

/* 直播信息 */
.live-info {
    padding: 12px 0 0;
}

/* 公司信息 */
.company-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.company-logo {
    margin-right: 8px;
    background-color: #f5f7fa;
    border: 1px solid #ebeef5;
}

.company-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.company-name {
    font-size: 13px;
    color: #606266;
    margin-right: 5px;
}

.industry-tag {
    font-size: 12px;
}

/* 直播标题 */
.live-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #303133;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 44px;
}

/* 直播元信息 */
.live-meta {
    margin-bottom: 12px;
}

.time-info {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #67c23a;
    margin-bottom: 5px;
}

.time-info .el-icon {
    margin-right: 5px;
}

.duration {
    margin-left: 5px;
    color: #909399;
}

.description {
    font-size: 13px;
    color: #606266;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 标签容器 */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.tag-item {
    margin-right: 0;
}

/* 操作按钮 */
.live-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn .el-icon {
    margin-right: 4px;
}

.watch-btn {
    flex: 2;
}

.reserve-btn {
    flex: 2;
}

.share-btn {
    flex: 1;
}

/* 动画效果 */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .category-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .more-actions {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }

    .more-btn {
        width: 100%;
    }

    .live-title {
        font-size: 15px;
        height: 42px;
    }

    .live-actions {
        flex-direction: column;
    }

    .action-btn {
        width: 100%;
    }
}
</style>
